import React from 'react';
import { SketchPicker } from 'react-color';
import styled from 'styled-components';

const CustomSketchPicker = styled(SketchPicker)`
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
`;
function ColorPicker({
  color,
  onChange,
  disabled = false,
}: {
  color: string;
  onChange: (c: string) => void;
  disabled?: boolean;
}) {
  return (
    <div
      className='flex flex-col items-center gap-2'
      style={{ position: 'relative' }}
    >
      <CustomSketchPicker
        color={color}
        onChange={(c) => {
          onChange(c.hex);
        }}
        disableAlpha={true}
        presetColors={[
          '#D7C252',
          '#215737',
          '#D72525',
          '#2157D7',
          '#D7D7D7',
          '#000000',
          '#FFFFFF',
          '#E6C200',
          '#FFE066',
          '#B0B0B0',
          '#E0E0E0',
        ]}
      />
      {disabled && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '98%',
            background: 'rgba(255,255,255,0.5)',
            cursor: 'not-allowed',
            zIndex: 2,
          }}
        />
      )}
    </div>
  );
}

export default ColorPicker;
